<!-- 
  原数组
 -->

<script>
  let sourceArr = [
    {
      id: 1,
      name: '1',
      pid: null
    },
    {
      id: 2,
      name: '2',
      pid: 1
    },
    {
      id: 3,
      name: '3',
      pid: 2,
    }
  ]
  // let targetArr = [
  //   {
  //     id: 1,
  //     name: '1',
  //     pid: null,
  //     children: [
  //       {
  //         id: 2,
  //         name: '2',
  //         pid: 1,
  //         children: [
  //           {
  //             id: 3,
  //             name: '3',
  //             pid: 2,
  //           }
  //         ]
  //       }
  //     ]
  //   }
  // ]
  function transTree (arr) {
    const treeArr = []
    // 处理逻辑
    // 基础逻辑：寻找自己父节点的过程 
    // 通过pid去匹配id，如果匹配上了 就把自己放到人家的chilren属性里面
    // 如果没有匹配上 代表自己是没有父节点的 就应该直接被放到treeArr
    // 1. 遍历原数组 形成一个map结构 其实就是一个以id为key，以自身为value的对象
    const map = {}
    arr.forEach((item) => {
      map[item.id] = item
      map[item.id].children = []
    })
    console.log(map)
    // 2. 通过pid去匹配id
    arr.forEach(item => {
      // 隐式转化的问题 找到了 得到了大对象 放到if -> true
      if (map[item.pid]) {
        // 找到了
        map[item.pid].children.push(item)
      } else {
        // 没找到
        treeArr.push(item)
      }
    })
    return treeArr
  }
  const newArr = transTree(sourceArr)
  console.log(newArr);
</script>